<template>
    <header class="layout-header" :class="{ active: activeTab === 'header'}">
        <div class="flex items-center w-[120px] h-[50px]">
            <img
                :src="'http://127.0.0.1:8100/static/images/pc_logo.png'"
                alt="logo"
                class="max-w-full max-h-full"
            />
        </div>
        <div class="flex items-center">
            <div class="flex items-center">
                <el-avatar :size="32" :src="AvatarImg" />
                <span class="ml-1.5 text-tx-regular">小默默</span>
            </div>
        </div>
    </header>
</template>

<script setup lang="ts">
import AvatarImg from '@/assets/image/avatar.png'

defineProps({
    activeTab: {
        type: String,
        default: ''
    }
})
</script>

<style scoped lang="scss">
.layout-header {
    position: sticky;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 60px;
    padding: 0 15px;
    background-color: var(--el-bg-color);
    cursor: pointer;
    border: 1px solid transparent;
    box-sizing: border-box;
    &.active {
        border: 1px dashed var(--el-color-primary);
    }
}
</style>